<template>
    <div class="color-fff">
        <div v-if="collection">
            <div class="pd-30 pt-0 pb-0" id="section1">
                <div class="font-17 color-fff">{{ collection.name }}</div>
                <div class="mt-20 flex align-center">
                    <div class="flex align-center cursor-pointer"
                        @click="toPath('/user-homepage?user_id=' + collection.user_info.id)">
                        <el-avatar :size="26" :src="collection.user_info.avatar"></el-avatar>
                        <div class="ml-6">{{ collection.user_info.name }}</div>
                    </div>
                    <div class="attention-button cursor-pointer" v-if="collection.attention"
                        @click="cancelAttentionFun(collection.user_info.id, collection)">已关注</div>
                    <div class="attention-button attention-button-active cursor-pointer" v-else
                        @click="attentionFun(collection.user_info.id, collection)">关注</div>
                </div>
                <div class="marginTop10">
                    {{ '主演：' + collection.actor }}
                </div>
                <div class="position-relative">
                    <div :class="{ 'text-auto': expand }" class="color-eee font-13 mt-20 text-line3" ref="desc">
                        <span>{{ collection.desc }}</span>
                    </div>
                    <div @click="expand = !expand" class="font-13 color-999 cursor-pointer display-inline"
                        v-if="show_more_visible">
                        <i :class="!expand ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" class="el-icon color-999"></i>
                        <span class="pl-2 pr-2">{{ !expand ? '展开' : "收起" }}</span>
                    </div>
                </div>
                <div class="flex align-center mt-10">
                    <div :class="{ 'ml-10': index > 0 }" :key="index" class="labels"
                        v-for="(item, index) in collection.labels">
                        #{{ item }}</div>
                </div>
            </div>

            <div class="pt-5 pb-5">
                <el-divider></el-divider>
            </div>
            <div class="pl-30 pr-30" id="section2">
                <div>
                    <span class="color-fff font-17">剧集</span>
                    <span class="color-yellow-light font-13 pl-15">更新至{{ collection.current_episode }}集</span>
                </div>

                <div class="episode-list mt-10">
                    <el-row :gutter="5">
                        <el-col :key="index" :span="2" class="mt-5" v-for="(item, index) in creations">
                            <template v-if="item.exist">
                                <div :class="{ 'play-episode': episode.episode === item.episode }"
                                    @click="switchEpisode(item)" class="episode-item text-center cursor-pointer"
                                    v-if="!item.need_pay">{{ item.episode }}</div>
                                <div :class="{ 'play-episode': episode.episode === item.episode }"
                                    @click="switchEpisode(item)"
                                    class="episode-item-disable text-center cursor-pointer position-relative"
                                    style="color:#fff" v-else>
                                    {{ item.episode }}
                                    <div class="position-absolute flex" style="top:0;right:0;">
                                        <el-image :src="require('@/assets/icon/video/need-pay.png')" fit="cover"
                                            style="width:1vw;height:1vw;"></el-image>
                                    </div>
                                </div>
                            </template>
                            <div class="episode-item-disable text-center cursor-pointer" v-else>{{ item.episode }}</div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="pt-10 pb-5">
                <el-divider></el-divider>
            </div>
            <div class="font-17 color-fff pl-30 pr-30" id="section3">
                <span>评论</span>
                <span class="pl-10">{{ episode.comment_count }}</span>
            </div>

            <div class="pt-20" style="width:calc(100% - 60px);margin-left:30px;">
                <div class="comment-list pb-30" v-show="data.length > 0">
                    <div :class="{ 'mt-10': index > 0 }" :key="index" v-for="(item, index) in data">
                        <comment-item :info="item" @replyUser="replyUser"></comment-item>
                    </div>
                </div>
                <div class="flex jus-center align-center flex-dre-column pb-80" style="padding-top:10vh"
                    v-show="data.length == 0">
                    <el-image :src="empty_icon" fit="cover" style="width: 8vw; height: 8vw"></el-image>
                    <div class="color-fff font-14">还没有相关留言</div>
                </div>
                <div class="position-absolute fiexd-input flexSB">
                    <input style="width: 60%;" :class="{ 'reply-input': reply_with != null }" :maxlength="200"
                        :placeholder="reply_with == null ? '说点什么吧' : '请输入回复内容'" @keydown="handleBackspace"
                        class="my-input text-indent-10" type="text" v-model="content" />
                    <div class="">
                        <div style="width: 100px;position: absolute;right:20%;top: 0;">
                            <el-button :loading="button_loading" @click="comment" round size="small">发送</el-button>
                        </div>
                        <div
                            style="width: 3vw;background-color: rgba(255, 255, 255, 0.2);padding: 0.9vh;border-radius: 50px;right: 10px;">
                            <div class="flexFS size12 hand" @click.stop="rewardFun(collection.creation)">
                                <img alt src="@/assets/icon/creation/dasang.png" srcset style="width:20px;" />
                                <span>打赏</span>
                            </div>
                        </div>
                    </div>
                    <div style="position: absolute;top: 0px;line-height: 4.4vh;overflow: hidden;background:#272337;border-top-left-radius: 25px;border-bottom-left-radius: 25px;font-size:1.6vh;"
                        v-if="reply_with != null">
                        <span class="pl-5 pr-5">回复</span>
                        <span>{{ reply_with.user.name }}：</span>
                    </div>
                </div>
            </div>
        </div>
        <payment :creation_id="creation_id" ref="payment"></payment>
    </div>
</template>

<script>
import CommentItem from '@/components/video/comment/item.vue'
import pageTool from '@/mixins/page'
import payment from '@/components/payment/payment'
import Cookies from 'js-cookie';
export default {
    components: {
        CommentItem,
        payment
    },
    props: {
        collection: {
            type: Object,
            default() {
                return null
            },
        },
    },

    mixins: [pageTool],
    data() {
        return {
            show_more_visible: false,
            expand: false,
            creations: [],
            query: {
                creation_id: null,
            },
            reply_with: null,
            empty_icon: require('@/assets/image/comment/empty.png'),
            button_loading: false,
            content: '',
            episode: {
                episode: 0,
                comment_count: 0,
            },
            submitComplete: false,
            creation_id: null
        }
    },
    methods: {
        beforeInit() {
            const { scrollHeight, offsetHeight } = this.$refs.desc
            if (scrollHeight > offsetHeight) {
                this.show_more_visible = true
            }
            this.query.creation_id = this.episode.creation_id
            this.query.page = 1
            this.url = '/creation-comment/index'
            this.append = true
            this.init()
                .then(() => { })
                .catch(() => { })
                .finally(() => {
                    this.inited = true
                })
        },

        isLogin() {
            // 返回true表示已经登录，false表示未登录
            let result = Cookies.get('user-info');
            if (result) {
                return true;
            } else {
                return false;
            }
        },
        rewardFun(id) {
            console.log('打赏')
            let res = this.isLogin()
            if (res) {
                let filteredArr = id.filter(item => item.episode == this.episode.episode);
                this.$nextTick(() => {
                    this.creation_id = filteredArr[0].creation_id
                    this.$refs.payment.feeShow = true
                })
            } else {
                console.log('未登录')
                this.$store.dispatch('system/showLogin')
            }
        },

        toPath(url) {
            this.$router.push(url)
        },
        attentionFun(id, item) {
            console.log('res', item)
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            console.log(id)
            this.$request
                .post('/user-attention/create/' + id)
                .then((res) => {
                    this.submitComplete = false
                    item.attention = 1
                    this.$message({
                        message: '关注成功',
                        type: 'success',
                        customClass: "messageClass"
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        //取消关注
        cancelAttentionFun(id, item) {
            if (this.submitComplete) return
            this.submitComplete = true
            this.$request
                .del('/user-attention/cancel/' + id)
                .then((res) => {
                    this.submitComplete = false
                    item.attention = 0
                    this.$message({
                        message: '已取消',
                        type: 'success',
                        customClass: "messageClass"
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        getAttrs(array, attr) {
            var arr = array.map((item) => {
                return item[attr]
            })

            return arr
        },
        loadCreation() {
            let has_episode = this.getAttrs(this.collection.creation, 'episode')

            for (let i = 0; i < this.collection.episodes; i++) {
                if (has_episode.indexOf(i + 1) > -1) {
                    this.collection.creation.forEach((item) => {
                        if (i + 1 == item.episode) {
                            this.creations.push({ episode: i + 1, exist: true, need_pay: item.need_pay })
                        }
                    })
                } else {
                    this.creations.push({ episode: i + 1, exist: false, need_pay: false })
                }
            }
        },
        replyUser(info) {
            this.reply_with = info
        },
        comment() {
            if (this.content == '') {
                this.$message({
                    message: '请输入内容',
                    type: 'warning',
                })
                return false
            }
            this.button_loading = true
            if (this.reply_with) {
                let param = {
                    comment_id: this.reply_with.comment_id,
                    message: this.content,
                }
                this.$request
                    .post('/creation-comment/replay', param)
                    .then((res) => {
                        this.content = ''
                        this.reply_with = null
                    })
                    .catch((err) => {
                        console.log(err, 'err')
                    })
                    .finally(() => {
                        this.button_loading = false
                    })
            } else {
                let param = {
                    creation_id: this.episode.creation_id,
                    message: this.content,
                }
                this.$request
                    .post('/creation-comment/create', param)
                    .then((res) => {
                        this.data.push(res)
                        this.content = ''
                        this.reply_with = null
                    })
                    .catch((err) => {
                        console.log(err, 'err')
                    })
                    .finally(() => {
                        this.button_loading = false
                    })
            }
        },
        handleBackspace(event) {
            if (event.keyCode === 8) {
                if (this.content == '') {
                    this.reply_with = null
                }
            }
        },
        switchEpisode(item) {
            this.$emit('switchEpisode', item)
            console.log('item', this.episode.episode, item)
        },
    },
}
</script>

<style lang="scss" scoped>
.attention-button {
    padding: 1px 18px;
    border-radius: 12px;
    color: #999;
    border: 1px solid #999;
    margin-left: 30px;

    &-active {
        border: 1px solid #ff1c6d;
        color: #ff1c6d;
        background: rgba(255, 28, 109, 0.5);
    }
}

.text-auto {
    overflow: auto;
    -webkit-line-clamp: inherit;
    line-clamp: inherit;
}

.labels {
    padding: 1px 12px;
    border-radius: 12px;
    background: #28243f;
    color: #fff;
}

/deep/.el-divider {
    background: #313131;
}

.episode-item {
    height: 1.6vw;
    line-height: 1.6vw;
    font-size: 0.8vw;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);

    &-disable {
        height: 1.6vw;
        line-height: 1.6vw;
        font-size: 0.8vw;
        border-radius: 2px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #666;
    }
}

.play-episode {
    background: rgba(255, 255, 255, 0.7);
}

.fiexd-input {
    bottom: 2vh;
    width: 91%;
}

/deep/.my-input {
    border: none;
    color: #f3f3f3;
    background: #272337;
    width: calc(100% - 4.5vw);
    // margin-left: 30px;
    height: 4.4vh;
    border-radius: 4vh;
    outline: none;
    padding-right: 70px;
    padding-block: 0;
    padding-inline: 0;
    text-indent: 1vw;
    z-index: 1;
    font-size: 1.7vh;
}

/deep/.el-button--small.is-round {
    margin-top: 3px;
    background: #403a57;
    border: none;
    color: #fff;
    // padding: 11px 16px;
    font-size: 1.6vh;
    position: absolute;
    top: -2px;
    right: 1px;
    width: 4vw;
    height: 4vh;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment-list {
    height: calc(41vh - 50px);
    overflow-y: scroll;
}

.comment-list::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}
</style>